<!-- 学校详情 -->
<template>
	<view class="content">
		<view class="tabs">
			<view class="view-tab flex alignCenter">
				<view v-for="item of options" :key="item.id" class="tab-item font14 bold" @click="handleClick(item.id)" :class="chooseType==item.id?'font16':'font14'"> {{item.title}} </view>	
				<view class="bg" :class="chooseType==2?'left1':chooseType==3?'left2':chooseType==4?'left3':''"></view>
			</view>
		</view>
		<view class="pageContent">
			<!-- 大学 -->
			<schoolInfo ref="schoolInfoPage" v-show="chooseType==1"></schoolInfo>
			<!-- 专业 -->
			<subjectPage ref="subjectPage" v-show="chooseType==2"></subjectPage>
			<!-- 就业形式 -->
			<getJob ref="getJob" :title="schoolTitle" v-show="chooseType==3"></getJob>
		</view>
	</view>
</template>
<script>
	
	import { bindingRelationship } from "@/api/toolbox.js"
	import schoolInfo from './components/schoolInfo/schoolInfo.vue';
	import subjectPage from './components/subjectPage/subjectPage.vue';
	import getJob from './components/getJob/getJob.vue';

	export default {
		components:{
			schoolInfo,
			subjectPage,
			getJob,
		},
		data() {
			return {
				chooseType: 1,//1、概况，2、专业，3、就业形式
				options: [
					{id: 1,title: '概况'},
					{id: 2,title: '专业'},
					{id: 3,title: '就业形式'},
				],
				schoolTitle:''
			}
		},
		onLoad(options) {
			this.chooseType = 1;
			// uni.setStorageSync('flowId', '1646696505421201408'); //推广员id
			uni.setStorageSync('schoolCode',options.schoolCode);
			this.schoolTitle=options.title?options.title:''
			// uni.setStorageSync('schoolCode', '10001');
			this.handleClick(this.chooseType);
		},
		methods: {
			/**
			 * tab 点击事件
			 * @param {Object} type 1、大学，2、专业，3、就业形式
			 */
			handleClick(type){
				this.chooseType = type;
				if(type == 1){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.schoolInfoPage.getData();
						}, 300)
					})
					return;
				}
				if(type == 2){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.subjectPage.getData();
						}, 300)
					})
					return;
				}
				if(type == 3){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.getJob.getData();
						}, 300)
					})
					return;
				}
				
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		border-top: 1px solid #f2f2f2;
		.tabs{
			position: sticky;
			top: 88rpx;
			/* #ifdef MP */
			top: 0;
			/* #endif */
			z-index: 99;
		}
		.view-tab{
			justify-content: center;
			position: sticky;
			top: 0px;
			
			height: 90rpx;
			width: 100%;
			z-index: 999;
			background: #ffffff;
			
			
			.tab-item{
				width: 150rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #000000;
				// padding: 10px;
				text-align: center;
			}
		}
		
		.bg{
			position: absolute;
			left: 184rpx;
			margin-top: 80rpx;
			z-index: 1;
			width: 80rpx;
			height: 8rpx;
			background: #FDE080;
			transition: all .5s;
			z-index: 9999;
		}
		.left1{
			left: 340rpx;
		}
		.left2{
			left: 480rpx;
		}
		
		.pageContent{
			// margin-top: 90rpx;
		}
	}
	
</style>
